<script setup>
  import WeatherTable from '@/components/WeatherTable.vue'
  import { useRoute } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import {
    getCityDetailWeatherApi,
    getCityADatyWeatherApi,
    getCityWeekWeatherApi
  } from '@/apis/weather'

  const route = useRoute()
  // 存储省份城市
  const proCitName = ref({
    province: '', // 省份名字
    city: '' // 城市名字
  })
  // 从路由参数获取省份名字
  proCitName.value.province = route.query.province
  // 从路由参数获取城市名字
  proCitName.value.city = route.query.city

  // 城市详细天气情况
  const detailWeather = ref({})
  const getCityDetail = async () => {
    const res = await getCityDetailWeatherApi(proCitName.value)
    detailWeather.value = res.data.data
  }
  onMounted(() => {
    getCityDetail()
  })

  // 城市24小时天气情况
  const hourWeather = ref([])
  const getCityHour = async () => {
    const res = await getCityADatyWeatherApi(proCitName.value)
    hourWeather.value = res.data.data
  }
  onMounted(() => {
    getCityHour()
  })

  // 城市周天气情况
  const weekWeather = ref([])
  const getCityWeek = async () => {
    const res = await getCityWeekWeatherApi(proCitName.value) // 添加的proCitName, 原本没有 2.37t
    weekWeather.value = res.data.data

  }
  onMounted(() => {
    getCityWeek()
  })
</script>

<template>
  <div class="wrapper">
    <WeatherTable
      :detailWeather="detailWeather"
      :hourWeather="hourWeather"
      :weekWeather="weekWeather"
    />
  </div>
</template>

<style scoped>
  /* 头部 */
  .wrapper {
    margin: 0 auto;
    width: 1200px;
    height: 100%;
  }
</style>
